<template>
	<div class="contact" v-if="data">
		<h2>联系方式</h2>
		<ul class="contact__detail">
			<li>
				<svg class='icon' aria-hidden="true">
					<use xlink:href="#icon-qq"></use>
				</svg>
				<span class="contact__detail--num">{{data.qq}}</span>
			</li>
			<li>
				<svg class='icon' aria-hidden="true">
					<use xlink:href="#icon-WeChat"></use>
				</svg>
				<span class="contact__detail--num">{{data.weixin}}</span>
			</li>
			<li>
				<svg class='icon' aria-hidden="true">
					<use xlink:href="#icon-shouji3"></use>
				</svg>
				<span class="contact__detail--num disabled" >{{data.phone}}</span>
			</li>
			<li>
				<svg class='icon' aria-hidden="true">
					<use xlink:href="#icon-shouji3"></use>
				</svg>
				<span class="contact__detail--num">{{data.other}}</span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contact {
		@include index_title;
	}
	
	.contact__detail {
		padding: $com-padding-lr-base;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		li {
			display: flex;
			align-items: center;
			flex: 0 0 45%;
		}
		li:not(:nth-last-of-type(-n + 2)) {
			margin-bottom: .7rem;
		}
		.icon {
			font-size: $contact-icon;
		}
		.disabled {
			color: $gray-light;
			text-decoration: line-through;
		}
	}
	.contact__detail--num {
		font-size: $font-xs;
		margin-left: rem(5);
		color: $gray-dark;
	}
</style>